<template>
	<view class="register-payment-page">
		<view class="section-card">
			<view class="pad-10-0"> <strong>物流信息</strong></view>
			<view class="">
				<u-cell-group>
						<u-cell-item icon="car-fill" title="邮政EMS" label="EMS2025879424342123" > </u-cell-item>
						<u-cell-item icon="file-text-fill" title="订单编号" label="2025879424342008"></u-cell-item>
					</u-cell-group>
			</view>
		</view>
		
		<view class="process-detail">
			<view class="process-item" :class="{
		                'past': processInfo.sighStatus === 1,
		                'active': processInfo.sighStatus === 0,
		                'normal': processInfo.sighStatus === -1
		            }" v-for="(processInfo, idx) in processList" :key="idx">
				<view class="process-icon-box" :class="{
		                'past': processInfo.signStatus === 1,
		                'active': processInfo.signStatus === 0,
		                'normal': processInfo.signStatus === -1
		            }"></view>
				<view class="process-content-box">
					
					<view class="process-operate">
						<view class="process-content">
							<view class="process-title">{{ processInfo.name }}</view>
							<view class="process-desc" v-if=" processInfo.desc">
								{{ processInfo.desc }}
							</view>
						</view>
					</view>
					<view class="process-desc" v-if="processInfo.time">{{ processInfo.time }}</view>
				</view>
			</view>
		</view>
		
	</view>
	
</template>

<script>
	
		import {
			mapGetters
		} from 'vuex'
	
		export default {
			components: {
	
			},
			data() {
				return {
					processList: [{
						name: '[成都市] 快件配送中',
						signStatus:1,
						desc:'快递员正在配送中...',
						time:'2025-08-17 10:37:14'
					},{
						name: '[成都市] 快件已到达 高新一部',
						signStatus:-1,
						desc:'',
						time:'2025-08-17 09:25:16'
					},{
						name: '[成都市] 快件运输中',
						signStatus:-1,
						desc:'',
						time:'2025-08-16 19:42:05'
					},{
						name: '[成都市] 快件已到达 武侯一部',
					    signStatus:-1,
						desc:'仓库处理中',
				     	time:'2025-08-16 19:07:08'
					},{
						name: '[成都市] 快件已经发出',
						signStatus:-1,
						desc:'包装完成',
						time:'2025-08-16 18:57:01'
					},],
					current: 0,
					type: 1,
					currpage: 4,
					relate: false,
					currRelate: '',
					currPassType: '',
					passType: false,
					day: 7,
					showPageOne: 2,
				}
			},
			computed: {
				...mapGetters(['currentHospitalInfo'])
			},
			mounted() {
	
			},
			methods: {
				change(e) {
	
					this.current = e
					if (this.list[e].type == 1) {
						this.showPageOne = 1;
	
					}
					if (this.list[e].type == 2) {
						this.showPageOne = 2
					}
	
				},
				goToPage() {
					uni.navigateTo({
						url: '/pages/Home/ServePatient/MedicalRecordsEMSDetail'
					})
				},
				choiceActive(item) {
					item.active = !item.active
				},
				choice(type) {
					this.type = type
				},
				toNextPage(page) {
					this.currpage = page
				},
				confirm(e, key) {
					if (key === 'currPassType') {
						this.currPassType = e[0].label
					} else {
						this.currRelate = e[0].label
	
					}
				},
			}
		}
</script>

<style lang='scss' scoped>
	.register-payment-page {
		background: linear-gradient(#e0f3ff 0%, #fff 30%);
		min-height: 100vh;
		padding: 30rpx 20rpx 40rpx;
	}
	
	.section-card {
		background: #fff;
		border-radius: 16rpx;
		margin: 25rpx 0 0 0;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
		padding: 24rpx 32rpx 18rpx 32rpx;
	
	}
	.process-detail {
		margin: 10rpx 0;
		display: flex;
		flex-direction: column;
		gap: 32rpx;
	}
	
	.process-item {
		height: 160rpx;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 24rpx;
		box-shadow: 2rpx 4rpx 24rpx 0 rgba(0, 0, 0, 0.04);
		padding: 24rpx 32rpx 24rpx;
		position: relative;
		margin-left: 100rpx;
	
		&.past {
			padding: 0 32rpx 12rpx;
		}
	}
	
	.process-item:not(:last-child)::before {
		content: '';
		position: absolute;
		left: -54rpx;
		top: 60%;
		height: calc(70%);
		width: 4rpx;
		background: #e0e0e0;
		transform: translateY(20%);
		z-index: 1;
	}
	
	.process-item.active:not(:last-child)::before {
		background: linear-gradient(#4ad6e5 0%, #e0e0e0 100%);
	}
	
	.process-item.past:not(:last-child)::before {
		background: #46aeb9;
	}
	
	.process-item.normal:not(:last-child)::before {
		background: #e0e0e0;
	}
	
	.process-operate {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.process-icon-box {
		width: 52rpx;
		height: 52rpx;
		border-radius: 50%;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 32rpx;
		position: absolute;
		left: -80rpx;
		top: 50%;
		transform: translateY(-50%);
		border: 16rpx solid #e0e0e0;
		box-sizing: border-box;
		z-index: 2;
	}
	
	.process-icon-box.active {
		background: #fff;
		border-color: #46aeb9;
	}
	
	.process-icon-box.past {
		background: #fff;
		border-color: #4ad6e5;
	}
	
	.process-icon-box.normal {
		background: #fff;
		border-color: #e0e0e0;
	}
	
	.process-content-box {
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	
	.process-time {
		font-size: 28rpx;
		color: #b3b3b3;
		padding: 0 10rpx 10rpx;
	}
	
	.process-icon {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		background: #cffaff;
		padding: 12rpx;
		margin-right: 14rpx;
	}
	
	.process-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
		justify-content: center;
	}
	
	.process-title {
		font-size: 30rpx;
		color: #222;
	}
	
	.process-desc {
		font-size: 26rpx;
		color: #888;
		display: flex;
		align-items: center;
		gap: 12rpx;
	}
	
	.nav-link {
		color: #1ec6e6;
		font-size: 26rpx;
		margin-left: 8rpx;
		display: flex;
		align-items: center;
	}
	
	.process-btn {
		min-width: 120rpx;
		height: 48rpx;
		background: #f6fafd;
		color: #1ec6e6;
		border: 2rpx solid #1ec6e6;
		border-radius: 24rpx;
		font-size: 26rpx;
		margin-left: 24rpx;
		padding: 0 24rpx;
		outline: none;
		transition: background 0.2s;
	}
	
	.process-btn.disabled {
		color: #b3b3b3;
		border-color: #e0e0e0;
		background: #f6f6f6;
		pointer-events: none;
	}
</style>